<template>
  <div>
    <el-row>
      <!-- 上方行 -->
      <el-col :span="24">
        <!-- 上方行内容 -->
        <span>切换城市：</span>
        <el-cascader
          placeholder="试试搜索：北京"
          :options="cityOptions"
          @change="getWeather()"
          v-model="selectedValues"
          :props="{ checkStrictly: true,expandTrigger: 'hover'  }"
          filterable
          :show-all-levels="false">
        </el-cascader>
      </el-col>
    </el-row>

    <el-row>
      <!-- 下方行 -->
      <el-col :span="10" style="height: 160px;">
        <!-- 下方行左侧内容 -->
        <div class="left-pane">
          <!-- 左侧内容 -->
          <div style="margin-bottom:50px">
            <!--文字大小，距离顶部距离-->
            <div v-if="weather" style="font-size: 20px;font-weight: bold;margin-top: 5px">{{ weather.city }}</div>

            <div class="weather">
              <img style="width: 60px;height: 60px;" :src="`/src/assets/weather/${todaySWeather.dayweather}.png`"/>
              <div class="weathertext">{{ todaySWeather.dayweather }}</div>
              <div class="temperature" v-if="todaySWeather.daytemp">
                {{ todaySWeather.nighttemp }}~{{ todaySWeather.daytemp }}&#8451
              </div>
            </div>
<!--            <div class="updateTime">更新时间：{{ weather.reporttime }}</div>-->
          </div>
        </div>
      </el-col>

      <el-col :span="14"  style="height: 160px;">
        <!-- 下方行右侧内容 -->
        <div class="right-pane">
          <!-- 右侧内容 -->
          <!--      <div class="_3Days">未来</div>-->
          <div class="future">
            <!--遍历显示-->
            <div v-for="(item,index) in casts" :key="index">
              <div class="list-status">星期{{ item.week | weekChinese }}</div>
              <div class="list-status">{{ item.date | dayTime }}</div>
              <img style="width: 45px;height: 45px;margin: 10px auto;"
                   :src="`/src/assets/weather/${item.dayweather}.png`"/>
              <div class="list-status">{{ item.dayweather }}</div>
              <div class="list-temp">{{ item.nighttemp }}~{{ item.daytemp }}&#8451</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import axios from 'axios'
import city from '@/api/city'

export default {
  name: "day",
  data() {
    return {
      weather: [],
      todaySWeather: [],//今天
      casts: [],//未来几天
      selectedValues: [], //下拉框所选择的项
      select: '',
      cityOptions: city, //引入外部城市列表用来显示在下拉框
    }
  },
  created() {
    this.getWeather()
  },
  filters: {
    weekChinese(value) {
      let week = '';
      switch (value) {
        case '1':
          week = '一';
          break;
        case '2':
          week = '二';
          break;
        case '3':
          week = '三';
          break;
        case '4':
          week = '四';
          break;
        case '5':
          week = '五';
          break;
        case '6':
          week = '六';
          break;
        case '7':
          week = '日';
          break;
      }
      return week;
    },
    dayTime(value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : "" + (date.getMonth() + 1);
      var day = date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
      // return (year + "-" + month + "-" + day);
      return (month + "月" + day + "日");
    },
  },
  methods: {
    getWeather() {
      // console.log("当前选择的城市" + this.selectedValues)
      this.select = this.selectedValues[this.selectedValues.length - 1];
      //如果select为空，则选择城市为唐山
      if (!this.select) {
        this.select = '唐山'
      }
      // console.log("查询天气的城市:" + this.select)
      axios({
        url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.select}&key=af451af27eae1ac902fea685a1b15dcd&extensions=all`,
        method: 'get',
      }).then((res) => {
        //未来三天数据
        const {forecasts} = res.data
        this.weather = forecasts[0]
        this.todaySWeather = forecasts[0].casts[0]
        //当天数据
        this.casts = forecasts[0].casts.slice(1)
        // console.log(this.casts, 'weather')
      });
    },
  }
}
</script>

<style scoped>
.weather {
  margin: 20px 0;
  font-size: 45px;
  display: flex;
  color: #666;
  align-items: center;
  justify-content: start;
}

.weathertext {
  margin: 0 5px;
  /*height: 20px;*/
  font-size: 30px;
}
.temperature {
  margin: 0 5px;
  /*height: 20px;*/
  font-size: 30px;
}


.future {
  width: 90%;
  display: flex;
  text-align: center;
  justify-content: space-between;
}

._3Days {
  margin: 20px 0;
  font-style: italic;
  font-size: 18px;
  font-weight: bold;
  color: #5f5f5f;
}

.updateTime {
  font-size: 16px;
  color: #999;
  margin-top: 10px;
}

.list-status {
  font-size: 14px;
  line-height: 19px;
  color: #222222;
}

.list-temp {
  font-size: 16px;
  font-weight: bold;
  padding-top: 8px;
}

.container {
  display: flex; /* 使用Flex布局 */
  /* 或使用下面的代码使用Grid布局 */
  /* display: grid;
     grid-template-columns: 1fr 1fr; */
  /*height: 100vh; !* 设置容器高度 *!*/
  height: 10%; /* 设置组件宽度为界面宽度的 1/5 */
}

.left-pane {
  flex: 1; /* 左侧部分占据剩余空间 */
  /* 或使用下面的代码设置Grid布局 */
  /* grid-column: 1; */
  /*background-color: #f2f2f2; !* 左侧部分的背景色 *!*/
  background-color: #ffffff; /* 右侧部分的背景色 */
}

.right-pane {
  flex: 1; /* 右侧部分占据剩余空间 */
  /* 或使用下面的代码设置Grid布局 */
  /* grid-column: 2; */
  background-color: #ffffff; /* 右侧部分的背景色 */
}
</style>
